<template>
   <div id="cesiumContainer" ref="cesiumContainer"></div>
</template>

<script>
import * as Cesium from "cesium";
import "./Widgets/widgets.css";
import { defineComponent,onMounted} from 'vue';
// 设置cesium静态资源路径

Cesium.Ion.defaultAccessToken ="eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiI2YjZkYzg4Zi1lZDk0LTQ5MzAtOWY2ZC1iZTk2M2ZkMDNkNzMiLCJpZCI6MTcxOTQxLCJpYXQiOjE2OTczNzMxMjF9.XTLkB6y-WYULbHv7dSw__dU6Ku8Q_-6lRUuf6YZMMR0";
// 设置cesium默认视角
Cesium.Camera.DEFAULT_VIEW_RECTANGLE = Cesium.Rectangle.fromDegrees(
  // 西边的经度
  89.5,
  // 南边维度
  20.4,
  // 东边经度
  110.4,
  // 北边维度
  61.2
);
window.CESIUM_BASE_URL = "/";
export default defineComponent({
  name: 'App',
  components: {
    
  },
  setup(){
    onMounted(()=>{
      // cesium viewer查看器
      var viewer = new Cesium.Viewer("cesiumContainer", {
         // 是否显示信息窗口
        infoBox: false,
        // 是否显示查询按钮
        geocoder: false,
        // 不显示home按钮
        homeButton: false,
        // 控制查看器的显示模式 3d 2d(球平铺开来) 2.5d(倾斜，方便看到建筑物效果)
         sceneModePicker: false,
        // 是否显示图层选择 BaseLayerPicker控件供用户选择影像和地形服务的数据源 默认是加载第一个影像数据源和第一个地形数据源
        baseLayerPicker: false,
        // 是否显示帮助按钮
        navigationHelpButton: false,
        // 是否播放动画 左下角的暂停和播放圆角按钮
        animation: false,
        // 是否显示时间轴 是否显示时间轴 在页面的底下，调整星空背景位置会变
        timeline: false,
        // 是否显示全屏按钮
        fullscreenButton: false,
        // 设置天空盒
        skyBox: new Cesium.SkyBox({
          sources:{
              positiveX: "./texture/sky/px.jpg",
              negativeX: "./texture/sky/nx.jpg",
              positiveY: "./texture/sky/ny.jpg",
              negativeY: "./texture/sky/py.jpg",
              positiveZ: "./texture/sky/pz.jpg",
              negativeZ: "./texture/sky/nz.jpg",
          }
        }),
         // 天地图矢量路径图
          // imageryProvider: new Cesium.WebMapTileServiceImageryProvider({
          //   url: "http://t0.tianditu.com/vec_w/wmts?service=wmts&request=GetTile&version=1.0.0&LAYER=vec&tileMatrixSet=w&TileMatrix={TileMatrix}&TileRow={TileRow}&TileCol={TileCol}&style=default&format=tiles&tk=2c94f5bb38ace449a896675c94f6ce12",
          //   layer: "tdtBasicLayer",
          //   style: "default",
          //   format: "image/jpeg",
          //   tileMatrixSetID: "GoogleMapsCompatible",
          // }),
          //   天地图影像服务
          imageryProvider: new Cesium.WebMapTileServiceImageryProvider({
            url: "http://t0.tianditu.com/img_w/wmts?service=wmts&request=GetTile&version=1.0.0&LAYER=img&tileMatrixSet=w&TileMatrix={TileMatrix}&TileRow={TileRow}&TileCol={TileCol}&style=default&format=tiles&tk=2c94f5bb38ace449a896675c94f6ce12",
            layer: "tdtBasicLayer",
            style: "default",
            format: "image/jpeg",
            tileMatrixSetID: "GoogleMapsCompatible",
          }),
          // OSM地图,
          // imageryProvider: new Cesium.OpenStreetMapImageryProvider({
          //   url: "https://a.tile.openstreetmap.org/",
          // }),
          // 高德矢量地图,
          // imageryProvider: new Cesium.UrlTemplateImageryProvider({
          //   url: "http://webrd02.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=8&x={x}&y={y}&z={z}",
          //   layer: "tdtVecBasicLayer",
          //   style: "default",
          //   format: "image/png",
          //   tileMatrixSetID: "GoogleMapsCompatible",
          // }),
      });
      // 矢量底图和影像地图叠加
      const imageryLayer = viewer.imageryLayers;
      const layers = imageryLayer.addImageryProvider(
        new Cesium.UrlTemplateImageryProvider({
          url: "http://webrd02.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=8&x={x}&y={y}&z={z}",
          layer: "tdtVecBasicLayer",
          style: "default",
          format: "image/png",
          tileMatrixSetID: "GoogleMapsCompatible",
        })
      );
      layers.alpha = 0.5;//设置添加进去的高德地图的图层透明度，让其显示出来

 
      // 隐藏左下角的logo
      viewer.cesiumWidget.creditContainer.style.display = "none";


    })
  }
})
</script>

<style>
* {
  margin: 0;
  padding: 0;
}
#cesiumContainer {
  width: 100vw;
  height: 100vh;
}
</style>
